<template>
  <el-dialog
    title="工作日安排"
    v-model="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="40%"
    :close-on-click-modal="false"
    top="5vh"
    class="report-text-form"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <div class="dia-sub">
      <div>
        <span>{{ weekData.year }}年</span>
        <span>{{ weekData.month }}月</span>
        <span>{{ weekData.day }}日</span>
        <span class="week">{{ weekData.week }}</span>
        <br />
        <span>{{ baseData.join("-") }}</span>
      </div>
      <el-button v-if="!configDisabled" type="primary" @click="handleConfig"
        >设置</el-button
      >
    </div>

    <div class="workday">
      <!-- {{ classesDutyList }} -->
      <template v-if="classesDutyList && classesDutyList.length">
        <div v-for="(item, index) in classesDutyList" :key="item.id">
          <div v-if="item.produceStatus" class="team-status list">
            <span>{{ item.workTime }}</span>
            <span
              class="status"
              v-text="item.produceStatus == 'ON' ? '班' : '休'"
              :class="item.produceStatus == 'OFF' ? 'off-work' : ''"
            >
            </span>
          </div>

          <template v-else>
            <el-collapse accordion v-model="activeTeam">
              <el-collapse-item :name="index" class="team">
                <template v-slot:title>
                  <div class="team-title">
                    <span class="team-name">{{ item.workTime }}</span>
                    <span
                      class="status"
                      v-if="item.produceStatus"
                      v-text="item.produceStatus == 'ON' ? '班' : '休'"
                      :class="item.produceStatus == 'OFF' ? 'off-work' : ''"
                    >
                    </span>
                  </div>
                </template>

                <template
                  v-if="
                    item.workshopDutyInfoList &&
                    item.workshopDutyInfoList.length
                  "
                >
                  <div
                    v-for="(ele, idx) in item.workshopDutyInfoList"
                    :key="ele.workshopId"
                  >
                    <div v-if="ele.produceStatus" class="list workshop-pick">
                      <span class="workshop-name">{{ ele.workshopName }}</span>
                      <span
                        class="status"
                        v-text="ele.produceStatus == 'ON' ? '班' : '休'"
                        :class="ele.produceStatus == 'OFF' ? 'off-work' : ''"
                      >
                      </span>
                    </div>

                    <template v-else>
                      <el-collapse accordion v-model="activeWorkshop">
                        <el-collapse-item :name="idx" class="workshop">
                          <template v-slot:title>
                            <div class="list workshop-list">
                              <span class="workshop-name">{{
                                ele.workshopName + ""
                              }}</span>
                              <span
                                class="status"
                                v-if="ele.produceStatus"
                                v-text="ele.produceStatus == 'ON' ? '班' : '休'"
                                :class="
                                  ele.produceStatus == 'OFF' ? 'off-work' : ''
                                "
                              >
                              </span>
                            </div>
                          </template>

                          <template
                            v-if="
                              ele.lineDutyInfoList &&
                              ele.lineDutyInfoList.length
                            "
                          >
                            <div
                              v-for="(tar, indexs) in ele.lineDutyInfoList"
                              :key="indexs"
                              class="line"
                            >
                              <!-- {{ tar.produceStatus }} -->
                              <!-- <div class="list line-list">
                                <span>{{ tar.lineName }}</span>
                                <span
                                  class="status"
                                  v-if="tar.produceStatus"
                                  v-text="
                                    tar.produceStatus == 'ON' ? '班' : '休'
                                  "
                                  :class="
                                    tar.produceStatus == 'OFF' ? 'off-work' : ''
                                  "
                                >
                                </span>
                              </div> -->
                              <div
                                v-if="tar.produceStatus"
                                class="list line-list"
                              >
                                <span class="workshop-name">{{
                                  tar.lineName
                                }}</span>
                                <span
                                  size="mini"
                                  class="status"
                                  v-text="
                                    tar.produceStatus == 'ON' ? '班' : '休'
                                  "
                                  :class="
                                    tar.produceStatus == 'OFF' ? 'off-work' : ''
                                  "
                                >
                                </span>
                              </div>

                              <template v-else>
                                <el-collapse accordion v-model="activeLineName">
                                  <el-collapse-item
                                    :name="indexs"
                                    class="workshop"
                                  >
                                    <template v-slot:title>
                                      <div class="list workshop-list">
                                        <span>{{ tar.lineName }}</span>
                                        <span
                                          size="mini"
                                          class="status"
                                          v-if="tar.produceStatus"
                                          v-text="
                                            tar.produceStatus == 'ON'
                                              ? '班'
                                              : '休'
                                          "
                                          :class="
                                            tar.produceStatus == 'OFF'
                                              ? 'off-work'
                                              : ''
                                          "
                                        >
                                        </span>
                                      </div>
                                    </template>

                                    <template
                                      v-if="
                                        tar.sectionDutyInfoDtoList &&
                                        tar.sectionDutyInfoDtoList.length
                                      "
                                    >
                                      <div
                                        v-for="as in tar.sectionDutyInfoDtoList"
                                        :key="as.lineId"
                                        class="line"
                                      >
                                        <div class="list line-list">
                                          <span>{{ as.sectionName }}</span>
                                          <span
                                            size="mini"
                                            class="status"
                                            v-if="as.produceStatus"
                                            v-text="
                                              as.produceStatus == 'ON'
                                                ? '班'
                                                : '休'
                                            "
                                            :class="
                                              as.produceStatus == 'OFF'
                                                ? 'off-work'
                                                : ''
                                            "
                                          >
                                          </span>
                                        </div>
                                      </div>
                                    </template>
                                  </el-collapse-item>
                                </el-collapse>
                              </template>
                            </div>
                          </template>
                        </el-collapse-item>
                      </el-collapse>
                    </template>
                  </div>
                </template>
              </el-collapse-item>
            </el-collapse>
          </template>
        </div>
      </template>

      <!-- 没有设置工作日 -->
      <template v-else>
        <div v-for="item in teamList" :key="item.id">
          <div class="team-onle list" style="height: 30px">
            <span>{{ item.workTime }}</span>
            <span class="status">班</span>
          </div>
          <!-- <div v-if="item.workTimeDetail && item.workTimeDetail.length > 0">
            <div
              v-for="(item, index) in item.workTimeDetail"
              :key="index"
              style="padding-left: 50px; height: 30px"
            >
              <span>{{ item }}</span>
            </div>
          </div> -->
        </div>
      </template>
    </div>
  </el-dialog>
</template>
<script>
import { listShift } from "@/api/base/plan/shiftMgt/shiftMaintenance";
import { getDept, getClassesMode } from "@/api/system/dept";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    weekData: {
      type: Object,
      default: () => {},
    },
    baseData: {
      type: Object,
      default: () => {},
    },
    weekdayItem: {
      type: Object,
      default: () => {},
    },
    baseDataCode: {
      type: Object,
      default: () => {},
    },
    baseDataId: {
      type: Object,
      default: () => {},
    },
    configDisabled: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 100,
      },
      activeTeam: 0,
      activeWorkshop: 0,
      activeLineName: 0,
      teamList: [],
      classesDutyList: [],
      saveloading: false,
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("input", val);
      },
      get() {
        return this.value;
      },
    },
  },
  methods: {
    handleClose() {
      this.saveloading = false;
      this.resetFormData();
    },

    handleOpen() {
      this.resetFormData();
      this.classesDutyList = JSON.parse(
        JSON.stringify(this.weekdayItem?.classesDutyList || [])
      );
      if (!this.classesDutyList?.length) {
        //没有配置工作日
        this.getFactoryDetail();
      } else {
        this.classesDutyList.forEach((item) => {
          //获取班次
          if (item?.workshopDutyInfoList?.length) {
            item.workshopDutyInfoList.forEach((ele) => {
              //获取车间安排
              if (ele?.lineDutyInfoList?.length) {
                ele.lineDutyInfoList.forEach((ar) => {
                  //获取车间安排
                  if (ar?.sectionDutyInfoDtoList?.length) {
                    // ar.sectionDutyInfoDtoList.forEach(att=>{

                    // })

                    // 获取车间下面产线安排
                    if (ar.sectionDutyInfoDtoList.every(this.isExistRest)) {
                      //所有产线都是工作日
                      ar.produceStatus = "ON";
                    }
                    if (!ar.sectionDutyInfoDtoList.some(this.isExistRest)) {
                      //所有产线都是休息日
                      ar.produceStatus = "OFF";
                    }
                  } else {
                    //当前车间下的产线都是上班
                    ar.produceStatus = "ON";
                  }
                });
              } else {
                //当前车间下的产线都是上班
                ele.produceStatus = "ON";
              }
            });
            if (item.workshopDutyInfoList.every(this.isExistRest)) {
              //所有车间都是工作日
              item.produceStatus = "ON";
            }
            if (
              item.workshopDutyInfoList.every(this.isExisStatus) &&
              !item.workshopDutyInfoList.some(this.isExistRest)
            ) {
              //所有s车间存在produceStatus，并且所有车间都是休息日
              item.produceStatus = "OFF";
            }
          } else {
            //当前工厂下的产线都是上班
            item.produceStatus = "ON";
          }
        });
        console.log(this.classesDutyList, "1");

        this.classesDutyList.forEach((item) => {
          //获取班次
          if (item?.workshopDutyInfoList?.length) {
            item.workshopDutyInfoList.forEach((ele) => {
              // 获取车间下面产线安排
              if (ele.lineDutyInfoList.every(this.isExistRest)) {
                //所有产线都是工作日
                ele.produceStatus = "ON";
              }
              if (ele.lineDutyInfoList.every(this.isExistRest1)) {
                //所有产线都是休息日
                ele.produceStatus = "OFF";
              }
            });
          } else {
            //当前工厂下的产线都是上班
            item.produceStatus = "ON";
          }
        });
        console.log(this.classesDutyList, "2");
        this.classesDutyList.forEach((item) => {
          if (item?.workshopDutyInfoList?.length) {
          // 获取车间下面产线安排
          if (item.workshopDutyInfoList.every(this.isExistRest)) {
            //所有产线都是工作日
            item.produceStatus = "ON";
          }
          if (item.workshopDutyInfoList.every(this.isExistRest1)) {
            //所有产线都是休息日
            item.produceStatus = "OFF";
          }
          }
        });
        this.classesDutyList.forEach((ele) => {
          ele.workTime = `${ele.scheduleName}`;
        });
      }
    },
    getFactoryDetail() {
      let params = {};
      params.deptCode = this.baseDataCode[0];
      params.workDay =
        this.weekData.year +
        "-" +
        this.weekData.month +
        "-" +
        this.weekData.day;
      getClassesMode(params).then((res) => {
        if (res.data.classesMode == "1") {
          this.teamList = [
            {
              workTime: "白班",
            },
          ];
        }
        if (res.data.classesMode == "2") {
          this.teamList = [
            {
              workTime: "白班",
            },
            {
              workTime: "晚班",
            },
          ];
        }
        if (res.data.classesMode == "3") {
          this.teamList = [
            {
              workTime: "白班",
            },
            {
              workTime: "中班",
            },
            {
              workTime: "晚班",
            },
          ];
        }

        // let classesMode = 2;
        // if (res.data.classesMode) {
        //   classesMode = res.data.classesMode;
        // }
        // const modeList = SHIFT_MODE.filter((el) => el.value == classesMode);
        // this.teamList = modeList[0].children;
        // this.teamList.forEach((ele) => {
        //   ele.workTime = ele.scheduleName;
        //   ele.produceStatus = `ON`;
        // });
      });
    },

    isExistRest(value, index, ar) {
      if (value?.produceStatus) {
        if (value?.produceStatus == "ON") {
          return true;
        } else {
          return false;
        }
      }
    },

    isExistRest1(value, index, ar) {
      if (value?.produceStatus) {
        if (value?.produceStatus == "OFF") {
          return true;
        } else {
          return false;
        }
      }
    },
    isExisStatus(value, index, ar) {
      if (value?.produceStatus) {
        return true;
      } else {
        return false;
      }
    },

    getList() {
      this.saveloading = true;
      this.single = null;
      const { pageNum, pageSize } = this.pager;
      const params = {
        query: {
          searchValue: "",
        },
        pageNum,
        pageSize,
      };
      listShift(params)
        .then((response) => {
          if (response.code == 200) {
            this.teamList = response.rows || [];
            if (this.teamList?.length) {
              this.teamList.forEach((ele) => {
                // ele.workTime = `${ele.classesName}(${ele.startTime}-${ele.endTime})`;
                ele.workTime = `${ele.classesName}`;
              });
              // for (let i in this.teamList) {
              //   let planClassesScheduleList =
              //     this.teamList[i].planClassesScheduleList;
              //   if (planClassesScheduleList.length == 1) {
              //     this.teamList[i].workTime =
              //       this.teamList[i].classesName +
              //       "(" +
              //       planClassesScheduleList[0].startTime +
              //       "-" +
              //       planClassesScheduleList[0].endTime +
              //       ")";
              //   } else {
              //     this.teamList[i].workTime = this.teamList[i].classesName;
              //     this.teamList[i].workTimeDetail = planClassesScheduleList.map(
              //       (ele) => {
              //         return (
              //           ele.scheduleName +
              //           "(" +
              //           ele.startTime +
              //           "-" +
              //           ele.endTime +
              //           ")"
              //         );
              //       }
              //     );
              //   }
              // }
            }
          } else {
            this.teamList = [];
          }
          this.saveloading = false;
        })
        .catch(() => {
          this.teamList = [];
          this.saveloading = false;
        });
    },

    resetFormData() {
      this.$refs.ruleForm?.resetFields();
      this.classesDutyList = [];
      this.teamList = [];
      this.activeTeam = 0;
      this.activeWorkshop = 0;
      this.activeLineName = 0;
    },

    handleConfig() {
      this.$emit("config-click");
    },
  },
};
</script>
<style lang="scss" scoped>
.report-text-form {
  .dia-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    font-size: 15px;
    font-weight: 600;
    color: #606266;
    .week {
      margin: 0 8px;
    }
  }
  .workday {
    color: #606266;
    font-size: 15px;
    .team {
      .team-title {
        margin-bottom: 10px;
        .team-name {
          font-size: 15px;
        }
      }
    }
    .team:not(:last-child) {
      margin-bottom: 16px;
    }
    .team-onle:not(:last-child) {
      margin-bottom: 16px;
    }
    .team-status {
      margin-bottom: 16px;
    }
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .workshop-pick {
      margin-bottom: 10px;
      margin-left: 16px;
    }
    .workshop {
      margin-left: 16px;
      margin-bottom: 10px;
      .workshop-list:not(:last-child) {
        margin-bottom: 10px;
      }
    }
    .workshop-name {
      font-size: 15px;
    }
    .status {
      display: inline-block;
      vertical-align: middle;
      width: 36px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 6px;
      font-size: 14px;
      background: #88c446;
      color: #ffffff;
      &.off-work {
        background: #f56c6c;
      }
    }
    .line {
      margin-left: 32px;
    }
    .line:not(:last-child) {
      margin-bottom: 10px;
    }
    :deep(.el-collapse) {
      border: none;
      .el-collapse-item__header {
        border: none;
      }
      .el-collapse-item__wrap {
        border: none;
        .el-collapse-item__content {
          padding: 0;
        }
      }
    }
  }
}
</style>
